<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>TEST</title>
        <link href="v.css" rel="stylesheet" type="text/css">
        <script src ="https://unpkg.com/vue"></script>
    </head>

    <body>
        <h1>学习Vue.js</h1>
        <div id="left">
            <div id="lft">
                <b>声明式渲染</b>
            </div>
            
            <div id="lft">
                <b>条件与循环</b>
            </div>
            
            <div id="lft">
                <b>处理用户输入</b>
            </div>
        </div>

        <div id="right">
            <div id = "app">
                {{ message }}
            </div>
            
            <div id = "app-2">
                <span v-bind:title = "message">
                    鼠标悬停几秒钟查看此处动态绑定的提示信息！
                </span>
            </div>
        </div>
        <hr>

        <div id="right">
            <div id="app-3">
                <p v-if="seen">现在你看到我了</p>
            </div>
            
            <div id = "app-4">
                
                <ol>
                    <li v-for = "todo in todos">
                        {{todo.text}}
                    </li>
                </ol>
            </div>
        </div>
        <hr>

        <div id="right">
            <div id = "app-5">
                
                <p>{{message}}</p>
                <button v-on:click = "reverseMessage">逆转消息</button>
            </div>
            
            <div id = "app-6">
                
                <p>{{message}}</p>
                <input v-model = "message">
            </div>
            
        </div>
        
        <script src="v.js"></script>
    </body>
</html>